import React, { useEffect } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { AdminTableListItem } from '../adminData.d';

export interface FormValueType extends Partial<AdminTableListItem> {
}

export interface UpdateFormProps {
    onCancel: () => void;
    onSubmit: (values: Partial<AdminTableListItem>) => void;
    updateModalVisible: boolean;
    currentData: Partial<AdminTableListItem>;
}
const FormItem = Form.Item;

const formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
};

const AdminUpdateForm: React.FC<UpdateFormProps> = (props) => {
    const [form] = Form.useForm();
    const { Option } = Select;

    const {
        onSubmit,
        onCancel,
        updateModalVisible,
        currentData,
    } = props;

    useEffect(() => {
        if (form && !updateModalVisible) {
            form.resetFields();
        }
    }, [props.updateModalVisible]);

    useEffect(() => {
        if (currentData) {
            form.setFieldsValue({
                ...currentData,
            });
        }
    }, [props.currentData]);

    const handleSubmit = () => {
        if (!form) return;
        form.submit();
    };

    const handleFinish = (values: { [key: string]: any }) => {
        if (onSubmit) {
            onSubmit(values);
        }
    };

    const renderContent = () => {
        return (
            <>
                <FormItem
                    name="adminId"
                    label="主键"
                    hidden
                >
                    <Input id="update-adminId" placeholder="请输入主键" />
                </FormItem>
                <FormItem
                    name="adminName"
                    label="用户名"
                    rules={[{ required: true, message: '请输入用户名' }]}
                >
                    <Input id="update-adminName" placeholder="请输入用户名" />
                </FormItem>
                <FormItem
                    name="phone"
                    label="手机"
                >
                    <Input id="update-phone" placeholder="请输入手机" />
                </FormItem>
                <FormItem
                    name="email"
                    label="邮箱"
                >
                    <Input id="update-email" placeholder="请输入邮箱" />
                </FormItem>
                <FormItem
                    name="nickName"
                    label="昵称"
                >
                    <Input id="update-nickName" placeholder="请输入昵称" />
                </FormItem>
                <FormItem
                    name="realName"
                    label="真实姓名"
                >
                    <Input id="update-realName" placeholder="请输入真实姓名" />
                </FormItem>
                <FormItem
                    name="avatar"
                    label="头像"
                >
                    <Input id="update-avatar" placeholder="请输入头像" />
                </FormItem>
                <FormItem
                    name="country"
                    label="国家地区"
                >
                    <Input id="update-country" placeholder="请输入国家地区" />
                </FormItem>
                <FormItem
                    name="gender"
                    label="性别"
                >
                    <Select id="update-gender">
                        <Option value={1}>男</Option>
                        <Option value={2}>女</Option>
                        <Option value={0}>未知</Option>
                    </Select>
                </FormItem>
                <FormItem
                    name="province"
                    label="省"
                >
                    <Input id="update-province" placeholder="请输入省" />
                </FormItem>
                <FormItem
                    name="city"
                    label="市"
                >
                    <Input id="update-city" placeholder="请输入市" />
                </FormItem>
                <FormItem
                    name="remark"
                    label="备注信息"
                >
                    <Input id="update-remark" placeholder="请输入备注信息" />
                </FormItem>
                <FormItem
                    name="status"
                    label="状态"
                >
                    <Select id="update-status">
                        <Option value={0}>禁用</Option>
                        <Option value={1}>启用</Option>
                    </Select>
                </FormItem>
            </>
        );
    };


    const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

    return (
        <Modal
            forceRender
            destroyOnClose
            title="用户管理"
            visible={updateModalVisible}
            {...modalFooter}
        >
            <Form
                {...formLayout}
                form={form}
                onFinish={handleFinish}
            >
                {renderContent()}
            </Form>
        </Modal>
    );
};

export default AdminUpdateForm;
